﻿@model ContentSlider.Models.FeaturedItemGroupPart

@{
    Script.Include("colorpicker.js");
    Style.Include("colorpicker.css");

    var effects = new[] {"hslide", "vslide", "fade"};
}
@using (Script.Head()) {
    <style type="text/css">
        .featuredItems { padding:6px 0 6px 10px; margin:10px 0 12px 0; width: 50%; }
        .slideShowEdit , .featuredItems { border: 1px solid #dbdbdb;  }
        .slideShowEdit { width:65%; padding:10px; }
    </style>
}

<div>
    <fieldset class="slideShowEdit">
        <legend>Slide Show</legend>
        <p>A Feature Group is a collection of Feature Items that may be placed in any zone of your site.
        The settings of your feature group define the width and height of each feature item.
        You may add as many feature items to a group. Only one feature item will display at a time and a new feature will slide into place every few seconds.</p>
        <fieldset class="featuredItems">
            <legend>Display Properties</legend>
            <label for="@Html.FieldIdFor(m=>m.Name)">Name:</label>
            @Html.TextBoxFor(m=>m.Name)
            <label for="@Html.FieldIdFor(m=>m.GroupWidth)">Group Width:</label>
            @Html.TextBoxFor(m => m.GroupWidth, new { maxlength = "5" })
            <span class="hint">This is the overall width of one slide in the widget</span>
            <label for="@Html.FieldIdFor(m=>m.GroupHeight)">Group Height:</label>
            @Html.TextBoxFor(m => m.GroupHeight, new { maxlength = "5" })
            <span class="hint">This is the overall height of one slide in the widget</span>
        
            <label for="@Html.FieldIdFor(m=>m.BackgroundColor)">Text Area Background Color:</label>
            @Html.TextBoxFor(m => m.BackgroundColor, new { maxlength = "7" })
            <label for="@Html.FieldIdFor(m=>m.ForegroundColor)">Text Foreground Color:</label>
            @Html.TextBoxFor(m => m.ForegroundColor, new { maxlength = "7" })
        </fieldset>
        <fieldset class="featuredItems">
            <legend>Slide Behavior</legend>
            <label for="@Html.FieldIdFor(m=>m.TransitionEffect)">Transition Effect:</label>
            @Html.DropDownListFor(m=>m.TransitionEffect, new SelectList(effects, Model.TransitionEffect))
        
            <label for="@Html.FieldIdFor(m=>m.SlideSpeed)">Slide Speed:</label>
            @Html.TextBoxFor(m => m.SlideSpeed, new { maxlength = "9" })
            <span class="hint">This is the number of milliseconds it will take for one slide to transition to the next</span>
            <label for="@Html.FieldIdFor(m=>m.SlidePause)">Slide Pause:</label>
            @Html.TextBoxFor(m => m.SlidePause, new { maxlength = "9" })
            <span class="hint">This is the number of milliseconds a slide will be diplayed</span>
        
            <!--
            @Html.CheckBoxFor(m => m.ShowPager)
            <label for="@Html.FieldIdFor(m => m.ShowPager)" class="forcheckbox">Show pager</label>
            <span class="hint">This option will display pager controls superimposed over the text area of the slides</span>
            @Html.CheckBoxFor(m => m.ShowSlideNumbers)
            <label for="@Html.FieldIdFor(m => m.ShowSlideNumbers)" class="forcheckbox">Show slide numbers</label>
            <span class="hint">This determines if the slide number and total slides are displayed on each slide (e.g. 1 of 5)</span>
            -->
        </fieldset>
    </fieldset>
</div>

@using (Script.Foot())
{
    <script type="text/javascript">
    //<![CDATA[
        $(function () {
            $("#BackgroundColor, #ForegroundColor").ColorPicker({
                onBeforeShow: function () {
                    $(this).ColorPickerSetColor(this.value);
                },
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(300);
                    return false;
                },
                onSubmit: function (hsb, hex, rgb, el) {
                    $(el).val(hex);
                    $(el).ColorPickerHide();
                },
                onHide: function (colpkr) {
		            $(colpkr).fadeOut(300);
		            return false;
	            }
            });
        });
    //]]>
    </script>
}